<template>
  <view class="index-content">
    <!-- 首页轮播图 -->
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item v-for="(image, index) in images" :key="index">
          <img :src="image.src" alt="image"  mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>
  </view>

  <!-- 公告提醒 数据异常-->
   <view class="uni-padding-wrap uni-common-mt">
              <view class="uni-title uni-common-mt">
				  <image src="/static/assets/icon/公告S.png" mode=""></image>
                  <text>：一号孵化箱温度异常,请立即检查</text>
              </view>
 </view>
 
  <!-- 员工打卡 幼鹅选育 -->
  <view class="selection">
               <view class="selection--Clock selection-item" @click="navigateToScanPage">
  				  <image src="/static/assets/icon/扫描.png" mode="" ></image>
                   <text>幼鹅选育</text>
               </view>
			   <view class="selection--data selection-item" @click="navigateToReportPage">
			     				  <image src="/static/assets/icon/温度.png" mode=""></image>
			       <text>数据上报</text>
			   </view>
  </view>
  
  
    <!-- 功能列表-->
	<view class="function">
		<function-list />
	</view>
</template>


<script setup>
import { ref } from 'vue';
import FunctionList from "../index/component/FunctionList.vue";

// 响应式数据
const indicatorDots = ref(true);//小圆点
const autoplay = ref(true);//自动播放
const interval = ref(2000);//定时器
const duration = ref(500);//
const images = ref([
  { src: '/static/assets/index/index@1.jpg' },//static 目录中的文件路径是从根目录开始。
  { src: '/static/assets/index/index@2.jpg' },
  { src: '/static/assets/index/index@3.jpg' }
]);

// 方法
const changeIndicatorDots = () => {
  indicatorDots.value = !indicatorDots.value;
};

const changeAutoplay = () => {
  autoplay.value = !autoplay.value;
};

// 定义导航到扫描页面的方法
const navigateToScanPage = () => {
  uni.navigateTo({
    url: '/pages/scan/scan', // 假设扫描页面位于/pages/scan/scan路径下
    success: () => {
      console.log('成功跳转到扫描页面');
    },
    fail: (err) => {
      console.error('跳转失败', err);
    }
  });
   
}
// 定义导航到打卡码的方法
const navigateToCodePage = () => {
  uni.navigateTo({
    url: '/pages/code/code', // 假设扫描页面位于/pages/scan/scan路径下
    success: () => {
      console.log('成功跳转到扫描页面');
    },
    fail: (err) => {
      console.error('跳转失败', err);
    }
  });  
}
// 导航到数据上报
const navigateToReportPage = () => {
  uni.navigateTo({
    url: '/pages/report/report', // 假设扫描页面位于/pages/scan/scan路径下
    success: () => {
      console.log('成功跳转到每日数据上报页面');
    },
    fail: (err) => {
      console.error('跳转失败', err);
    }
  });  
}
</script>

<style scoped lang="scss">
	.index-content{
         padding: 10rpx 10rpx 0rpx 10rpx; /* 上右下左内边距 */
		
	}
	// 轮播图
	.uni-margin-wrap {
		width: 100%;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper {
		width: 95%;
		height: 100%; /* 设置轮播图的高度 */
		
	}

	.swiper-item {
		width: 100%;
		height: 100%; /* 使用100%高度填充 */    
	}

	image {
		width: 100%;
		height: 100%; /* 强制图片填充容器 */
		object-fit: cover; /* 保持比例并裁剪图片 */
		border-radius: 20rpx;
	}
	//公告区域
	.uni-padding-wrap{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 8rpx;
	}
	.uni-common-mt{
		padding: 10rpx 10rpx 10rpx 10rpx;	
	}
	.uni-title{
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: start;
		background-color: #fffaea;
		image{
			    height: 45rpx;
			    width: 45rpx;
				margin-left: 10rpx;
		}
		text{
				color:$uni-color-warning;//引入uni.scss公告变量函数
				font: 1;
				margin-left: 10rpx;
		}
	}
	// 幼鹅选育、健康数据上报区域
	.selection{
		display: flex;
		align-items: center;
	    justify-content: space-around;
		padding: 10rpx 10rpx 10rpx 10rpx;	
		margin-top: 8rpx;
	}
	.selection-item{
	    padding: 50rpx 60rpx 50rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		border-radius: 20rpx;
		image{
			    height: 50rpx;
			    width: 50rpx;
				margin-left: 10rpx;
		}
		text{
				color:$uni-color-warning;//引入uni.scss公告变量函数
				font: 1;
				margin-left: 15rpx;
		}
	}
	// 功能列表区域
	function-list{
		margin-top: 8rpx;	
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
</style>